<template>
  <div class="editor-container">
    <div :id="id">
      <vxe-input v-model="value1" :placeholder="placeholder" :size="size" :type="type" value-format="yyyy-MM-dd 00:00:00"></vxe-input>
      {{ separator }} <vxe-input v-model="value2" :placeholder="placeholder" :size="size" :type="type" value-format="yyyy-MM-dd 23:59:59" @click="copy"></vxe-input>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
import { randomString } from '/@/utils/ruoyi';
import XEUtils from "xe-utils";

// 定义接口来定义对象的类型
interface BetweenState {
  editor: any;
  value1:any,
  value2:any,
}

export default defineComponent({
  name: 'between',
  props: {
    // 节点 id
    id: {
      type: String,
      default: () => 'between_'+randomString(6),
    },
    // 类型
    type: {
      type: String,
      default: () => 'text',
    },
    // 大小
    size: {
      type: String,
      default: () => 'default',
   },
    // 内容框默认 placeholder
    placeholder: {
      type: String,
      default: () => '请输入内容',
    },
    // 内容框默认 separator
    separator: {
      type: String,
      default: () => '到',
    },
    // 双向绑定
    // 双向绑定值，字段名为固定，改了之后将不生效
    // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
    modelValue: String,
  },
  setup(props, { emit }) {
    const state = reactive<BetweenState>({
      editor: null,
      value1:'',
      value2:'',
    });
    // 初始化富文本
    // https://doc.wangeditor.com/

    const upval=()=>{
      let val=''
      if(state.value1!==''){
        val+=state.value1
      }
      if(state.value2!==''){
        val+=','+state.value2
      }

      emit('update:modelValue', val);
    }
    // 页面加载时
    onMounted(() => {

    });
    // 监听双向绑定值的改变
    // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
    watch(
        () => props.modelValue,
        (value) => {
          const vals=XEUtils.toString(value).split(",")
          state.value1=vals[0]
          if(vals.length>1){
            state.value2=vals[1]
          }else {
            state.value2=''
          }
        }
    );
    watch(
        () => state.value1,
        (value) => {
          upval()
        }
    );
    watch(
        () => state.value2,
        (value) => {
          upval()
        }
    );
    const copy=()=>{
      if(state.value2===''&&state.value1!==''){
        state.value2=state.value1+''
      }

    }
    return {
      copy,
      ...toRefs(state),
    };
  },
});
</script>
